<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-upload
          ref="upload"
          action="/lejuAdmin/material/uploadFileOssSave"
          :headers="token"
          :on-success="materailUploadSuccess"
        >
          <el-button slot="trigger" size="small" type="primary">素材上传</el-button>
          <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
        </el-upload>

        <el-button type="primary" size="mini">
          素材上传
          <input type="file" @change="iptChange">
        </el-button>

      </div>
      <!-- card body -->
      <el-row :gutter="20">
        <el-col v-for="item in materialList" :key="item.id" style="width:20%;margin-bottom:20px" :offset="0">
          <el-card shadow="never">
            <div slot="header">
              <span>创建时间: {{ item.createTime }}</span>
            </div>
            <el-image
              style="width: 280px; height: 250px"
              :src="item.ossUrl"
              fit="fill"
              :preview-src-list="previewSrcList"
            />
            <div>
              <el-button type="danger" size="mini">删除</el-button>
            </div>

          </el-card>

        </el-col>

      </el-row>

      <el-pagination
        :current-page.sync="paginationObj.start"
        :page-sizes="paginationObj.pageSizes"
        :page-size="paginationObj.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationObj.total"
        @size-change="sizeChange"
        @current-change="currentChange"
      />

    </el-card>

  </div>
</template>
<script>
import {
  findMaterialByPage as findMaterialByPageApi
} from '@/api/material'
import mix from '@/mixins'
import axios from 'axios'
export default {
  mixins: [mix],
  data() {
    return {
      materialList: [],
      previewSrcList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getMaterailList()
  },
  mounted() {
  },
  methods: {
    // 获取素材列表
    async getMaterailList() {
      const res = await findMaterialByPageApi(this.paginationObj.start, this.paginationObj.limit)
      const { success, data, message } = res
      if (success) {
        const { rows, total } = data
        this.materialList = rows
        this.paginationObj.total = total
        this.previewSrcList = rows.map(item => item.ossUrl)
      } else {
        this.$message.error(message)
      }
    },
    sizeChange(e) {
      this.paginationObj.start = 1
      this.paginationObj.limit = e
      this.getMaterailList()
    },
    currentChange(e) {
      this.paginationObj.start = e
      this.getMaterailList()
    },
    // 素材上传成功
    materailUploadSuccess(res) {
      const { success, message } = res
      if (success) {
        console.log('成功')
      } else {
        this.$message.error(message)
      }
      this.$refs.upload.clearFiles()
      // 刷新数据
      this.getMaterailList()
    },
    iptChange(event) {
      // console.log('event=>', event)
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      axios.post('http://leju.bufan.cloud/lejuAdmin/material/uploadFileOssSave', formData, { headers: this.token })
        .then(res => {
          console.log('res=>', res)
          const { success, message } = res.data
          if (success) {
            this.getMaterailList()
          } else {
            this.$message.error(message)
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
